<template>
    <div>
        <x-header :left-options="{backText: ''}">个人信息</x-header>
        <blur :blur-amount=40 :url="url">
            <p class="center"><img :src="userinfo.headImgUrl"></p>
        </blur>
        <card :header="{title:'我的信息'}" style="margin-top: 0px;">
            <div slot="content" class="card-demo-flex card-demo-content01">
                <div class="vux-1px-l vux-1px-r">
                    <span>{{userinfo.activityNum}}</span>
                    <br/>
                    发起
                </div>
                <div class="vux-1px-r">
                    <span>{{userinfo.joinActivityNum}}</span>
                    <br/>
                    参加
                </div>
                <div class="vux-1px-r">
                    <span>{{userinfo.notPassActivityNum}}</span>
                    <br/>
                    未通过
                </div>
            </div>
        </card>

        <group>
            <cell :title="('昵称')" :value="userinfo.nickName"></cell>
            <cell :title="('性别')" :value="userinfo.sex"></cell>
            <cell :title="('国家')" :value="userinfo.country"></cell>
            <cell :title="('城市')" :value="userinfo.city"></cell>
        </group>
        <toast v-model="show" type="warn">网络开小差了~</toast>
        <divider>我是有底线的</divider>
    </div>
</template>

<script>
    import {Cell, Group, Blur, XHeader, Divider, Toast, Card} from 'vux'
    import request from 'superagent'

    export default {
        components: {
            Blur,
            XHeader,
            Cell,
            Group,
            Divider,
            Toast,
            Card
        },
        data () {
            return {
                url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1486382878843&di=a48aa8c80b60ff67e5321bca03405934&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D9b885bdad62a283443a636036bb7c92e%2F40400626cffc1e177153c7f64890f603718de977.jpg',
                userinfo: {},
                show: false
            }
        },
        created: function () {
            this.getData();
        },
        methods: {
            getData() {
                request.get('/wx/user/userinfo')
                    .end((err, res) => {
                        console.log(res);
                        if (!res.ok) {
                            this.show = true;
                        } else {
                            this.userinfo = JSON.parse(res.text).data;
                        }
                    });
            }
        }
    }

</script>

<style scoped lang="less">
    @import '~vux/src/styles/1px.less';

    .center {
        text-align: center;
        padding-top: 20px;
        color: #fff;
        font-size: 18px;
    }

    .center img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 4px solid #ececec;
    }

    .card-demo-flex {
        display: flex;
    }

    .card-demo-content01 {
        padding: 10px 0;
    }

    .card-padding {
        padding: 15px;
    }

    .card-demo-flex > div {
        flex: 1;
        text-align: center;
        font-size: 12px;
    }

    .card-demo-flex span {
        color: #f74c31;
    }
</style>